<template>
  <BasicModal @register="registerPlaybackModal" title="轨迹回放" :width="800">
    <BasicTable @register="registerTable">
      <template #action="{ record }">
        <TableAction :actions="getTableAction(record)" :dropDownActions="false" />
      </template>
    </BasicTable>
  </BasicModal>
</template>
<script lang="ts" setup>
import { ref, computed } from 'vue';
import { BasicTable, TableAction } from '/@/components/Table';
import { BasicModal, useModalInner } from '/@/components/Modal';
import { useListPage } from '/@/hooks/system/useListPage';
import { playbackColumns } from './data'
import type { ActionItem } from '/@/components/Table';

const [registerPlaybackModal, { closeModal }] = useModalInner(async (_data) => {
  // isUpdate.value = data.isUpdate;
})

const { tableContext } = useListPage({
  designScope: 'playbackModal',
  tableProps: {
    api: () => {
      return new Promise((resolve) => {
        resolve([
          {
            k1: '无人机轨迹',
            k2: '2022-03-01 12:00:00',
          },
          {
            k1: '无人机轨迹',
            k2: '2022-03-01 12:00:00',
          },
          {
            k1: '无人机轨迹',
            k2: '2022-03-01 12:00:00',
          }
        ])
      })
    },
    columns: playbackColumns,
    useSearchForm: false,
  }
})

const [registerTable, { reload }, { rowSelection, selectedRowKeys }] = tableContext;

function getTableAction(record): ActionItem[] {
  return [
    { label: '轨迹回放', onClick: () => console.log(record) },
  ]
}
</script>
